/* -------------------------------------------------------------------------------------------------------------------------
A CSS3 presentation demonstrating how to take advantage of modern browsers while still allowing the content to be easily
accessible in older, less capable browsers.
Inspired by http://playground.deaxon.com/css/lightbox by http://twitter.com/deaxon 
---------------------------------------------------------------------------------------------------------------------------- */
.productGallery
{
    min-height:250px;
	height:auto;       
	margin-left:0px;
}
h2.title { font-size: 68px; letter-spacing: -3px; font-weight: bold; text-align: center; margin-top: 35px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6); }
h2.title span { font-size: 38px; line-height: 48px; display: block; letter-spacing: -2px; color: rgba(51, 51, 51, 0.5); }

/* -------------------------------------------------------------------------------------------------------------------------
Grid of images
---------------------------------------------------------------------------------------------------------------------------- */
#grid { margin: 25px 0; }
/*
Add the transition affect to the images in the grid. Any changes to the element will be transtioned from it's current state, for example on :hover */
#grid li { float: left; list-style: none; margin: 0 25px 25px 0; position: relative; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.25);
	-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
	-webkit-transition: all 0.15s ease-in;
	-moz-transition: all 0.15s ease-in;
	-ms-transition: all 0.15s ease-in;
	transition: all 0.15s ease-in;
}
#grid li.end { margin-right: 0; }
#grid li:nth-child(3n) { margin-right: 0; }
#grid li:hover { z-index: 2;
	-webkit-transform: scale(1.2) translateY(-40px);	
	-moz-transform: scale(1.2) translateY(-40px);	
	-ms-transform: scale(1.2) translateY(-40px);	
	transform: scale(1.2) translateY(-40px);	
	-webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}
/*
Rotate left hand column to the left upon hover */
#grid li:nth-child(3n-2):hover {
	-webkit-transform: scale(1.2) translate3d(0, -30px, 0) rotate(-2.5deg);
	-moz-transform: scale(1.2) translateY(-30px) rotate(-2.5deg);
	-ms-transform: scale(1.2) translateY(-30px) rotate(-2.5deg);
	transform: scale(1.2) translateY(-30px) rotate(-2.5deg);
}
/*
Rotate every third li with :nth-child(3n) (right hand column in this demo) to the right upon hover */
#grid li:nth-child(3n):hover {
	-webkit-transform: scale(1.2) translate3d(0, -30px, 0) rotate(2.5deg);	
	-moz-transform: scale(1.2) translateY(-30px) rotate(2.5deg);	
	-ms-transform: scale(1.2) translateY(-30px) rotate(2.5deg);	
	transform: scale(1.2) translateY(-30px) rotate(2.5deg);	
}

#grid img, li[id]:target div, #grid li, .backface {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#grid .details { position: absolute; bottom: 0; 
                 background: #fff; background: rgba(255, 255, 255, 0.87); 
                 border-top: 1px solid #fff; width: 270px; 
                 border-bottom: 1px solid rgba(0, 0, 0, 0.25);
                 padding: 10px;
                
	-webkit-border-radius:  0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	-webkit-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
	box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.35);
}
#grid .details h3 { margin-bottom: 0px; letter-spacing: -1px; }
#grid .details a.more { position: absolute; right: 10px; top: 5px; font-size: 12px; padding: 6px 10px; background-color: rgba(0, 0, 0, 0.03);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 15px;
	-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
	-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.6);
	-webkit-transition: all 0.15s ease-in;
}

#grid .details a.more:hover { background-color: #0090e2; color: #fff; }


#information { z-index: 20; }
#information li div h3 { background-color: #0090E2; border-radius: 5px 5px 0 0; color: #fff; font-size: 20px; font-weight: bold; margin: -30px -30px 20px; padding: 15px 30px; text-shadow: rgba(0, 0, 0, 0.4492); text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45); letter-spacing: -2px; }

/* -------------------------------------------------------------------------------------------------------------------------
Using :target we can style the specific ID of the list item when clicked/tapped on eg: www.url.com/#info1
---------------------------------------------------------------------------------------------------------------------------- */
li[id]:target { width: 100%; height: 100%; opacity: 1; z-index: 10; position: fixed; overflow-x: hidden; /* overflow-y: scroll; */ margin-bottom: 25px; }
li[id]:target::-webkit-scrollbar { width: 8px; background-color: rgba(0,0,0,0.6); position: relative; left:auto }
li[id]:target::-webkit-scrollbar-thumb { -webkit-border-radius: 1ex; background-color: #6CF; }
li[id]:target div { position: relative; margin: 0 auto; top: 15%; background: #fff; width: 600px; padding: 30px;
	-webkit-box-shadow: 0 1px 8px #000;
	-moz-box-shadow: 0 1px 8px #000;
	box-shadow: 0 1px 8px #000;
	-webkit-animation: lightbox 0.75s cubic-bezier(0,0,0,1);
	-moz-animation: lightbox 0.5s cubic-bezier(0,0,0,1);
}
/* 
Style list items with an ID */
li[id] { overflow: hidden; position: absolute; width: 0; height: 0; left: 0; top: 0; opacity: 0; background: rgba(0,0,0,.8);
	-webkit-transition: opacity 0.2s cubic-bezier(0,0,0,1);
	-moz-transition: opacity 0.2s cubic-bezier(0,0,0,1);
	transition: opacity 0.2s cubic-bezier(0,0,0,1);
}
/* 
Lightbox close button */
li[id] div a.close { background: #000; position: absolute; top: -10px; left: -10px; line-height: 0; color: #fff; text-align: center; font-weight: bold; border: 2px solid #fff; padding: 12px 9px 9px; border-radius: 30px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
	-moz-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
	box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
}

/* 
Animation keyframes for the lightbox.
First line is at 0% so we're setting it to be 5x the actual size and rotate it around the Y axis by -270 degrees
100% resets it's actual size and resets the rotation back to flat. */
@-webkit-keyframes lightbox {
	0% { -webkit-transform: scale(5) rotateY(-270deg); }
	100% { -webkit-transform: scale(1) rotateY(0deg); }
}

@-moz-keyframes lightbox {
	0% { -moz-transform: scale(5) /* rotateY(-270deg) */; }
	100% { -moz-transform: scale(1) /* rotateY(0deg) */; }
}

/* -------------------------------------------------------------------------------------------------------------------------
Use Modernizer (http://www.modernizr.com) to display content for browsers that don't support CSS Transforms.
It now defaults to linking to the ID ie: www.url.com/#info3 and moving to that position on the page.
---------------------------------------------------------------------------------------------------------------------------- */
.no-csstransforms #information li { overflow: visible; position: relative; margin: 0 auto; margin-bottom: 25px; background: #fff; width: 600px; padding: 30px; height: auto; list-style: none; }	
.no-csstransforms #information li div a.close { position: relative; background: transparent; padding: 0; color: #0090e2; font-size: 12px; font-weight: normal; left: 0; top: 0; }	


body { background: #ddd url(../images/noise.jpg); font-family: Arial, Helvetica, sans-serif; }

@font-face {
    font-family: 'BonvenoCFLight';
    src: url('../fonts/BonvenoCF-Light-webfont.eot?') format('eot'),
         url('../fonts/BonvenoCF-Light-webfont.woff') format('woff'),
         url('../fonts/BonvenoCF-Light-webfont.ttf') format('truetype'),
         url('../fonts/BonvenoCF-Light-webfont.svg#webfontIEwcSbIo') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AdelleBasicBold';
    src: url('../fonts/adellebasic_bold-webfont.eot?') format('eot'),
         url('../fonts/adellebasic_bold-webfont.woff') format('woff'),
         url('../fonts/adellebasic_bold-webfont.ttf') format('truetype'),
         url('../fonts/adellebasic_bold-webfont.svg#webfontll9eFuSn') format('svg');
    font-weight: normal;
    font-style: normal;

}

#container {  padding: 0 20px; margin: 0 auto; height:10px}


h1, h2, h3, p { color: #333; }
h2 { font-family: 'AdelleBasicBold', Arial, sans-serif; }
h3 { font-family: 'BonvenoCFLight', Arial, sans-serif; margin-bottom: 20px; }

a { text-decoration: none; color: #0090e2; }
a.ig:hover { background: #0090e2; color: #fff; padding: 3px 10px; border-radius: 20px; }

p { line-height: 23px; margin-bottom: 20px; }
p:last-of-type { margin-bottom: 0px; }

#carbonads-container { margin: 0 auto 50px; width: 300px;  }
#carbonads-container .carbonad .carbonad-tag { text-align: left !important; }

.figureIndex
{
	
	text-align:center;

	
}
.figureIndex img
{
	

}
.productDetail
{
	width:100%;
 	height:250px;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.productDetail img
{
	margin-top:15px;
	margin-bottom: 30px;
	margin-left:30px;
	margin-right:10px;
	float:left;
	padding:1px;
   border:2px solid #FFF;

   
}
#headerContent
{
	display: block; 
	margin-top:15px;
	margin-right:20px;
	width: 570px; 
	height: 180px;
	background-color: #f9f9f9; 
	border: 1px solid #ccc; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border-radius: 5px; 
	padding: 12px;
	float:right;
}
#headerContent h2
{
	 color:#F60;
	 border-bottom:2px solid #ccc;
	margin-left:30px;
	margin-right:330px;

}

.leftContent
{
	float:left;
width:50%;

}
.rightContent
{
	float: right;
	width:50%;
}

.leftContent h4
{
	margin-left:30px;
	margin-top:10px;
	color:#0066FF;
	float:left;

}
.leftContent p
{
	color:#930;
	margin-left:15px;
	margin-top:10px;
float:left;
	font-style:italic;
	height:30px;
}

.rightContent h4
{
	margin-left:30px;
	margin-top:10px;
	color:#0066FF;
	float:left;
		height:30px;

}
.rightContent p
{
	color:#930;
	margin-left:15px;
	margin-top:10px;
float:left;
	font-style:italic;
	font-weight:bold;
}

.description h4
{
	margin-left:30px;
	margin-top:10px;
	color:#0066FF;
	float:left;
		height:30px;
}
.description p
{
	color:#930;
	margin-left:30px;
	
float:left;
	font-style:italic;
	
}


.button, .button:visited {
	background: #222 url(overlay.png) repeat-x; 
	display: inline-block; 
	padding: 5px 10px 6px; 
	float:right;
	margin-right:150px;
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer
}
 
	.button:hover							{ background-color: #111; color: #fff; }
	.button:active							{ top: 1px; }
	.small.button, .small.button:visited 			{ font-size: 11px}
	.button, .button:visited,
	.medium.button, .medium.button:visited 		{ font-size: 13px; 
												  font-weight: bold; 
												  line-height: 1; 
												  text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
												  }
												  
	.large.button, .large.button:visited 			{ font-size: 14px; 
													  padding: 8px 14px 9px; }
													  
	.super.button, .super.button:visited 			{ font-size: 34px; 
													  padding: 8px 14px 9px; }
	
	.pink.button, .magenta.button:visited		{ background-color: #e22092; }
	.pink.button:hover							{ background-color: #c81e82; }
	.green.button, .green.button:visited		{ background-color: #91bd09; }
	.green.button:hover						    { background-color: #749a02; }
	.red.button, .red.button:visited			{ background-color: #e62727; }
	.red.button:hover							{ background-color: #cf2525; }
	.orange.button, .orange.button:visited		{ background-color: #ff5c00; }
	.orange.button:hover						{ background-color: #d45500; }
	.blue.button, .blue.button:visited		    { background-color: #2981e4; }
	.blue.button:hover							{ background-color: #2575cf; }
	.yellow.button, .yellow.button:visited		{ background-color: #ffb515; }
	.yellow.button:hover						{ background-color: #fc9200; }
	
	
	.detail
	{
		width:95%; 
	min-height: 350px;

	height:auto;
	background-color: #f9f9f9; 
	border: 1px solid #ccc; 
	margin-left:30px;

	
	}
	
	.tabs {
    position: relative;
	margin: 30px auto;
	width: 908px;
}

.tabs input {
	position: absolute;
	z-index: 1000;
	width: 120px;
	height: 40px;
	left: 0px;
	top: 0px;
	opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
	cursor: pointer;
}
.tabs input#tab-2{
	left: 120px;
}
.tabs input#tab-3{
	left: 240px;
}
.tabs input#tab-4{
	left: 360px;
}

.tabs label {
	background: #5ba4a4;
	background: -moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5ba4a4), color-stop(100%,#4e8c8a));
	background: -webkit-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -o-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: -ms-linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	background: linear-gradient(top, #5ba4a4 0%,#4e8c8a 100%);
	font-size: 15px;
	line-height: 40px;
	height: 40px;
	position: relative;
	padding: 0 20px;
    float: left;
	display: block;
	width: 80px;
	color: #385c5b;
	top: 0px;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
    border-radius: 3px 3px 0 0;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1), -2px 0 2px rgba(0,0,0,0.1);
}

.tabs label:after {
    content: '';
	background: #fff;
	position: absolute;
	bottom: -8px;
	left: 0;
	width: 100%;
	height: 8px;
	display: block;
}

.tabs input:hover + label {
	background: #5ba4a4;
	top: -8px;
	-webkit-transition: top linear 0.2s;
    -moz-transition: top linear 0.2s;
    -o-transition: top linear 0.2s;
    -ms-transition: top linear 0.2s;
    transition: top linear 0.2s;
}
.tabs input:hover + label:after{
	background: #5ba4a4;
}
.tabs input:hover + label ~ .clear-shadow {
    top: -8px;
	-webkit-transition: top linear 0.2s;
    -moz-transition: top linear 0.2s;
    -o-transition: top linear 0.2s;
    -ms-transition: top linear 0.2s;
    transition: top linear 0.2s;
}

.tabs input:checked:hover + label {
    top: 0;
}
.tabs input:checked:hover + label:after{
	background: #fff;
}
.tabs input:checked:hover + label ~ .clear-shadow {
    top: 0;
	background: #fff;
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
}

.tabs input.tab-selector-1:hover + label.tab-label-1 ~ .clear-shadow{
    z-index: 3;
}

.tabs input.tab-selector-2:hover + label.tab-label-2 ~ .clear-shadow {
    z-index: 2;
}

.tabs input.tab-selector-3:hover + label.tab-label-3 ~ .clear-shadow {
    z-index: 1;
}

.tabs input.tab-selector-4:hover + label.tab-label-4 ~ .clear-shadow {
    z-index: 0;
}
.tabs label:first-of-type {
    z-index: 4;
    box-shadow: 2px 0 2px rgba(0,0,0,0.1);
}

.tab-label-2 {
    z-index: 3;
}

.tab-label-3 {
    z-index: 2;
}

.tab-label-4 {
    z-index: 1;
}

.tabs input:checked + label {
    background: #fff;
	z-index: 6;
	-webkit-transition: top linear 0.2s;
    -moz-transition: top linear 0.2s;
    -o-transition: top linear 0.2s;
    -ms-transition: top linear 0.2s;
    transition: top linear 0.2s;
}

.clear-shadow {
    background: #5ba4a4;
	position: relative;
	top: 0;
    height: 10px;
	margin-bottom: -10px;
    clear: both;
	z-index: -2;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2);
    border-radius: 3px;
}

.content {
    background: #fff;
	position: relative;
    width: 100%;
	height: 370px;
	z-index: 5;
	overflow: hidden;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
	top: 0;
	left: 0;
	bottom: 100%;
	padding: 10px 40px;
	overflow: hidden;
	z-index: 1;
    opacity: 0;
    -webkit-transition: all linear 0.1s;
    -moz-transition: all linear 0.1s;
    -o-transition: all linear 0.1s;
    -ms-transition: all linear 0.1s;
    transition: all linear 0.1s;
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
	bottom: 0px;
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: all ease-out 0.2s 0.2s;
    -moz-transition: all ease-out 0.2s 0.2s;
    -o-transition: all ease-out 0.2s 0.2s;
    -ms-transition: all ease-out 0.2s 0.2s;
    transition: all ease-out 0.2s 0.2s;
}

.content div h2,
.content div h3{
	color: #398080;
}
.content div p {
	font-size: 14px;
	line-height: 22px;
	font-style: italic;
	text-align: left;
	margin: 0;
	color: #777;
	padding-left: 15px;
	font-family: Cambria, Georgia, serif;
	border-left: 8px solid rgba(63,148,148, 0.1);
}